<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>02-组件生命周期(旧)</title>
  </head>
  <body>
    <div id="app"></div>

    <!-- 导入 react 主库 -->
    <script src="../js/react.development.js"></script>
    <!-- 导入 reactDom 扩展库 -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 导入 babel 用于将jsx转为js -->
    <script src="../js/babel.min.js"></script>
    <!-- 导入 prop-types 用于对组件标签属性进行限制 -->
    <script src="../js//prop-types.js"></script>

    <script type="text/babel">
      class Count extends React.Component {
        // constructor 最先调用
        constructor(props) {
          super(props);
          console.log("Count---constructor");
        }
        // 组件挂载之前
        componentWillMount() {
          console.log("Count---componentWillMount");
        }

        // 组件挂载完毕
        componentDidMount() {
          console.log("Count---componentDidMount");
        }

        // 控制组件更新的阀门(true 开启) (false 关闭)
        shouldComponentUpdate() {
          console.log("Count---shouldComponentUpdate");
          return false;
        }

        // 组件将要更新
        componentWillUpdate() {
          console.log("Count---componentWillUpdate");
        }

        // 组件更新完毕
        componentDidUpdate() {
          console.log("Count---componentDidUpdate");
        }

        // 组件卸载之前
        componentWillUnmount() {
          console.log("Count---componentWillUnmount");
        }

        state = {
          count: 0,
        };
        add = () => {
          this.setState({ count: this.state.count + 1 });
        };
        // 卸载组件的回调
        death = () => {
          ReactDOM.unmountComponentAtNode(document.getElementById("app"));
        };
        // 强制更新组件的回调
        force = () => {
          this.forceUpdate();
        };
        render() {
          console.log("Count---render");
          const { count } = this.state;
          return (
            <div>
              <h2>给我点击加1：{count} </h2>
              <button onClick={this.add}>加1</button>
              <button onClick={this.death}>卸载组件</button>
              <button onClick={this.force}>
                不用更新state中的状态，强制更新组件
              </button>
            </div>
          );
        }
      }
      // ReactDOM.render(<Count />, document.getElementById("app"));

      // 父组件
      class A extends React.Component {
        state = { carName: "奔驰" };

        changeCar = () => {
          this.setState({ carName: "五菱宏光" });
        };

        render() {
          return (
            <div>
              <h1>A</h1>
              <button onClick={this.changeCar}>换车</button>
              <B carName={this.state.carName}/>
            </div>
          );
        }
      }

      // 子组件
      class B extends React.Component {

        // 子组件将要接收新的参数的时候触发(有一个坑第一次不会触发)
        componentWillReceiveProps(props) {
          console.log('B---componentWillReceiveProps', props);
        }

        shouldComponentUpdate() {
          console.log('B---shouldComponentUpdate');
          return true
        }

        componentWillUpdate() {
          console.log('B---componentWillUpdate');
        }

        componentDidUpdate() {
          console.log('B---componentDidUpdate');
        }

        render() {
          return (
            <div>
              <h1>B--{this.props.carName}</h1>
            </div>
          );
        }
      }

      ReactDOM.render(<A />, document.getElementById("app"));
    </script>
  </body>
</html>
